<template>
    <div>

        <!--导航栏-->
        <div style="position: fixed;z-index: 10;width: 100%">
            <van-nav-bar  title="AddressEdit" left-text="" left-arrow @click-left="onClickLeft()">
                <template #right>
                    <van-icon name="search" size="18" />
                </template>
            </van-nav-bar>
        </div>
        <div style="height: 50px"></div>

        <van-form @submit="onSubmit">
            <van-field
                    v-model="address.name"
                    name="name"
                    label="姓名"
                    placeholder="姓名"
                    :rules="[{ required: true, message: '请填写姓名' }]"
            />
            <van-field
                    v-model="address.tel"
                    name="tel"
                    label="电话"
                    placeholder="电话"
                    :rules="[{ required: true, message: '请填写电话' }]"
            />
            <van-field
                    v-model="address.address"
                    name="address"
                    label="地址"
                    placeholder="地址"
                    :rules="[{ required: true, message: '请填写地址' }]"
            />
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">添加地址</van-button>
            </div>
        </van-form>

    </div>
</template>

<script>
    import area from "../../assets/area";
    export default {
        name: "AddressEdit",
        data() {
            return {
                address:{
                    id: '',
                    buyerId:'',
                    address:'',
                    tel: '',
                    name: ''
                }
            };
        },
        methods: {
            onClickLeft(){
                this.$router.back();
            },
            onSubmit(values) {
                console.log(this.address);
                this.address.buyerId= this.$store.state.buyerId;
                this.$axios.post('/editAddress',this.address)
                .then(res => {
                    this.$router.back();
                })
            },
        },
        mounted() {
            console.log("==>AddressEdit");
            if(this.$route.query.address != null){
                this.address = this.$route.query.address
            }
        }
    }
</script>

<style scoped>

</style>